<!-- [JS-BGP] Java Script (sp_background.php only) -->
<script type="text/javascript">
    $(document).ready(function() {

        /* Basic setting
         ---------------------------------------------------------------------- */
        /* Popup gallery ajax load (Window 1, Window 2) */
        $.ajax({
            type: 'POST',
            url: '../assets/book/editor/sample_gallery/sample_galv_tx1.php',
            success: function(response, status, request) {
                $('#bg_gallery_box1').children('.galbox_content').empty().append(response);
            },
            beforeSend: function() {
                $('.loading_img').fadeIn('fast');
            },
            complete: function() {
                $('.loading_img').fadeOut();
            }
        });

        $.ajax({
            type: 'POST',
            url: '../assets/book/editor/sample_gallery/sample_galv_tx2.php',
            success: function(response, status, request) {
                $('#bg_gallery_box2').children('.galbox_content').empty().append(response);
            },
            beforeSend: function() {
                $('.loading_img').fadeIn('fast');
            },
            complete: function() {
                $('.loading_img').fadeOut();
            }
        });


        /* Opacity control (Slider)
         ---------------------------------------------------------------------- */
        $('#slider_texture').slider({
            min: 0, max: 1, step: 0.01, value: 1, orientation: "horizontal",
            slide: function(e, ui) {
                $('#bg_texture').css('opacity', ui.value);
                $('#amount_texture').val(ui.value);
            }
        });
        $('#amount_texture').val($('#slider_texture').slider('value'));

        $('#slider_pic').slider({
            min: 0, max: 1, step: 0.01, value: 1, orientation: "horizontal",
            slide: function(e, ui) {
                $('.pic_inner').css('opacity', ui.value);
                $('#amount_pic').val(ui.value);
            }
        });
        $('#amount_pic').val($('#slider_pic').slider('value'));

        $('#slider_envelop').slider({
            min: 0, max: 1, step: 0.01, value: 0.2, orientation: "horizontal",
            slide: function(e, ui) {
                $('#bg_envelop').css('opacity', ui.value);
                $('#amount_envelop').val(ui.value);
            }
        });
        $('#amount_envelop').val($('#slider_envelop').slider('value'));

        $('#slider_effect').slider({
            min: 0, max: 1, step: 0.01, value: 1, orientation: "horizontal",
            slide: function(e, ui) {
                $('#bg_effect').css('opacity', ui.value);
                $('#amount_effect').val(ui.value);
            }
        });
        $('#amount_effect').val($('#slider_effect').slider('value'));


        /* Navigation top area
         ---------------------------------------------------------------------- */
        /* Items all clear */
        $('.all_reset').click(function() {
            $('.bg_pattern').css({'background-image': 'url(../assets/book/editor/images/blank.gif)'});
            $('.btn_item1').css({'background-image': 'url(../assets/book/editor/images/icon_item1.png)'});
            $('.bg_texture').css({'background-image': 'url(../assets/book/editor/images/blank.gif)'});
            $('.btn_item2').css({'background-image': 'url(../assets/book/editor/images/icon_item2.png)'});
            $('.bg_pic_wrapper').css({'display': 'none)'});
            $('.bgpic_img1').attr({'src': '../assets/book/editor/images/blank.gif'});
            $('.btn_item3').css({'background-image': 'url(../assets/book/editor/images/icon_item3.png)'});
            $('.bg_color, #btn_item4').css({'background-color': ''});
            $('.btn_item4').css({'background-image': 'url(../assets/book/editor/images/icon_item4.png))'});
            $('.bg_envelop').css({'background-image': 'url(../assets/book/editor/images/blank.gif)'});
            $('.btn_item5').css({'background-image': 'url(../assets/book/editor/images/icon_item5.png))'});
            $('.bg_effect_frame1').attr({'src': 'assets/bookextend/blank.html'});
            $('.btn_item6').css({'background-image': 'url(../assets/book/editor/images/icon_item6.png))'});
        });

        /* Item show, hide button(Checkbox) */
        $('#hide_item1').click(function() {
            var $this = $(this);
            if ($this.is(':checked')) {
				$('#bg_pattern_layer').css({'display':'block'});
                $('#icon_item_off1').toggle();
            } else {
                $('#bg_pattern_layer').css({'display':'none'});
                $('#icon_item_off1').toggle();
            }
        });
        $('#hide_item2').click(function() {
            var $this = $(this);
            if ($this.is(':checked')) {
                $('#bg_texture_layer').css({'display':'block'});
                $('#icon_item_off2').toggle();
            } else {
                $('#bg_texture_layer').css({'display':'none'});
                $('#icon_item_off2').toggle();
            }
        });

        $('#hide_item3').click(function() {
            var $this = $(this);
            if ($this.is(':checked')) {
                $('#bg_pic_layer').css({'display':'block'});
                $('#icon_item_off3').toggle();
            } else {
                $('#bg_pic_layer').css({'display':'none'});
                $('#icon_item_off3').toggle();
            }
        });

        $('#hide_item4').click(function() {
            var $this = $(this);
            if ($this.is(':checked')) {
                $('#bg_color_layer').css({'display':'block'});
                $('#icon_item_off4').toggle();
            } else {
                $('#bg_color_layer').css({'display':'none'});
                $('#icon_item_off4').toggle();
            }
        });

        $('#hide_item5').click(function() {
            var $this = $(this);
            if ($this.is(':checked')) {
                $('#bg_envelop_layer').css({'display':'block'});
                $('#icon_item_off5').toggle();
            } else {
                $('#bg_envelop_layer').css({'display':'none'});
                $('#icon_item_off5').toggle();
                ;
            }
        });

        $('#hide_item6').click(function() {
            var $this = $(this);
            if ($this.is(':checked')) {
				$('#bg_effect_layer').css({'display':'block'});
                $('#icon_item_off6').toggle();
            } else {
				$('#bg_effect_layer').css({'display':'none'});
                $('#icon_item_off6').toggle();
            }
        });


        /* Popup gallery Show/Hide
         ---------------------------------------------------------------------- */
        $('.box_sh_icon1').children('.arrow_tgo1').click(function() {
            $('.box_sh_icon1').children('.arrow_tgo1, .arrow_tgc').toggle();
            $('#bg_gallery_box1').css({'right': '20px'});
            $('#bg_gallery_box1').addClass('bshadow-331004');
        });
        $('.box_sh_icon1').children('.arrow_tgc').click(function() { //Popup gallery 1 close
            $('.box_sh_icon1').children('.arrow_tgo2, .arrow_tgc').toggle();
            $('#bg_gallery_box1').css({'z-index': '0'});
            $('#bg_gallery_box1').removeClass('bshadow-331004');
        });
        $('.box_sh_icon1').children('.arrow_tgo2').click(function() {
            $('.box_sh_icon1').children('.arrow_tgo2, .arrow_tgc').toggle();
            $('#bg_gallery_box1').css({'z-index': '101'});
            $('#bg_gallery_box1').addClass('bshadow-331004');
        });

        $('.box_sh_icon2').children('.arrow_tgo1').click(function() {
            $('.box_sh_icon2').children('.arrow_tgo1, .arrow_tgc').toggle();
            $('#bg_gallery_box2').css({'right': '20px'});
            $('#bg_gallery_box2').addClass('bshadow-331004');
        });
        $('.box_sh_icon2').children('.arrow_tgc').click(function() { //Popup gallery 2 close
            $('.box_sh_icon2').children('.arrow_tgo2, .arrow_tgc').toggle();
            $('#bg_gallery_box2').css({'z-index': '0'});
            $('#bg_gallery_box2').removeClass('bshadow-331004');
        });
        $('.box_sh_icon2').children('.arrow_tgo2').click(function() {
            $('.box_sh_icon2').children('.arrow_tgo2, .arrow_tgc').toggle();
            $('#bg_gallery_box2').css({'z-index': '101'});
            $('#bg_gallery_box2').addClass('bshadow-331004');
        });

        $('.galbox_close1').click(function() { //Popup gallery 1 close (in popup window)
            $('.box_sh_icon1').children('.arrow_tgo2, .arrow_tgc').toggle();
            $('#bg_gallery_box1').css({'z-index': '0'});
            $('#bg_gallery_box1').removeClass('bshadow-331004');
        });
        $('.galbox_close2').click(function() { //Popup gallery 2 close (in popup window)
            $('.box_sh_icon2').children('.arrow_tgo2, .arrow_tgc').toggle();
            $('#bg_gallery_box2').css({'z-index': '0'});
            $('#bg_gallery_box2').removeClass('bshadow-331004');
        });


        /* Fullscreen Background selector
         ---------------------------------------------------------------------- */
        $('#bg_fs_cb').click(function() {
            var $this = $(this);
            if ($this.is(':checked')) {
                $('.bg_guide_box, .bg_fs_icon').toggle();
                $('#bg_pattern, #bg_texture, #bg_color, #bg_envelop').removeClass('position-r-mwho').addClass('position-a00-wh');
                $('.main_header_inner').removeClass('position-r-mwo').addClass('position-f000-wo');
                $('.vp_size, .select_bg_box').toggle();
                $('#bg_guide').prop('checked', true)
                $('#bg_pic').addClass('bg_guide_line');
                $('#bg_pic').css({'overflow': 'visible'});
                $('#bg_effect').css({'top': '100px'});
            } else {
                $('.bg_guide_box, .bg_fs_icon').toggle();
                $('#bg_pattern, #bg_texture, #bg_color, #bg_envelop').removeClass('position-a00-wh').addClass('position-r-mwho');
                $('.main_header_inner').removeClass('position-f000-wo').addClass('position-r-mwo');
                $('.vp_size, .select_bg_box').toggle();
                $('#bg_pic').removeClass('bg_guide_line');
                $('#bg_pic').css({'overflow': 'hidden'});
            }

            if ($("input:radio[name='rp_select1']").is(':checked')) {
                $('#rp_select1').prop('checked', false)
                $('#rp_select2').prop('checked', true)
                $('#bg_background').removeClass('pattern_inner');
                $('#bg_pattern').addClass('pattern_inner');
            } else {
                $('#bg_pattern').addClass('pattern_inner');
            }

            if ($("input:radio[name='tx_select1']").is(':checked')) {
                $('#tx_select1').prop('checked', false)
                $('#tx_select2').prop('checked', true)
                $('#bg_background').removeClass('texture_inner');
                $('#bg_texture').addClass('texture_inner');
            } else {
                $('#bg_texture').addClass('texture_inner');
            }
        });

        /* Guide line Show/Hide */
        $('#bg_guide').click(function() {
            var $this = $(this);
            if ($this.is(':checked')) {
                $('#bg_pic').addClass('bg_guide_line');
            } else {
                $('#bg_pic').removeClass('bg_guide_line');
            }
        });


        /* Layer 1 - Recurrence patterns(.panel_bg_pattern)
         ---------------------------------------------------------------------- */
        $('.btn_item1').on('click', function() { //When the navigation icon click
            $('.btn_item1').removeClass('btn_item_gray').addClass('btn_item_color');
            $('.btn_item2, .btn_item3, .btn_item4, .btn_item5, .btn_item6').removeClass('btn_item_color').addClass('btn_item_gray');
            $('.panel_bg_pattern').css({'left': '0'});
            $('.panel_bg_texture, .panel_bg_pic, .panel_bg_color, .panel_bg_envelop, .panel_bg_effect').css({'left': '-120%'});
			$('#bg_pattern_layer').css({'display':'block'});

            if ($("input:radio[name='rp_select2']").is(':checked')) {
				$("#bg_texture_layer").css({'display':'none'});
                $('#hide_item2').prop('checked', false)
                $('#icon_item_off2').css({'display': 'block'});
            }

            $('#icon_item_off1').css({'display': 'none'});
            $('#hide_item1').prop('checked', true)

            if ($("input:radio[name='rp_select2']").is(':checked')) {
                $('#bg_background').removeClass('pattern_inner texure_inner');
                $('#bg_pattern').addClass('pattern_inner');
            } else {
                $('#bg_pattern').removeClass('pattern_inner');
                $('#bg_background').addClass('pattern_inner');
            }

            /* Popup gallery ajax load */
            $.ajax({
                type: 'POST',
                url: '../assets/book/editor/sample_gallery/sample_galv_rp1.php',
                success: function(response, status, request) {
                    $('#bg_gallery_box1').children('.galbox_content').empty().append(response);
                },
                beforeSend: function() {
                    $('.loading_img').fadeIn('fast');
                },
                complete: function() {
                    $('.loading_img').fadeOut();
                }
            });

            $.ajax({
                type: 'POST',
                url: '../assets/book/editor/sample_gallery/sample_galv_rp2.php',
                success: function(response, status, request) {
                    $('#bg_gallery_box2').children('.galbox_content').empty().append(response);
                },
                beforeSend: function() {
                    $('.loading_img').fadeIn('fast');
                },
                complete: function() {
                    $('.loading_img').fadeOut();
                }
            });
        });


        /* Background area selector */
        $("input:radio[name='rp_select1']").on('click', function() {
            $("input:radio[name='rp_select2']").removeAttr("checked");
            $('.btn_fs_in, .btn_fs_out').toggle();
            $('#bg_pattern').removeClass('pattern_inner');
            $('#bg_background').removeClass('texture_inner').addClass('pattern_inner');
        });
        $("input:radio[name='rp_select2']").on('click', function() {
            $("input:radio[name='rp_select1']").removeAttr("checked");
            $('.btn_fs_in, .btn_fs_out').toggle();
            $('#bg_background').removeClass('pattern_inner texture_inner');
            $('#bg_pattern').addClass('pattern_inner');

            $('#bg_texture_layer').css({'display':'none'});
            $('#hide_item2').prop('checked', false)
            $('#icon_item_off2').css({'display': 'block'});
        });


        /* Layer 2 - Texture(.panel_bg_texture)
         ---------------------------------------------------------------------- */
        $('.btn_item2').on('click', function() { //When the navigation icon click
            $('.btn_item2').removeClass('btn_item_gray').addClass('btn_item_color');
            $('.btn_item1, .btn_item3, .btn_item4, .btn_item5, .btn_item6').removeClass('btn_item_color').addClass('btn_item_gray');
            $('.panel_bg_texture').css({'left': '0'});
            $('.panel_bg_pattern, .panel_bg_pic, .panel_bg_color, .panel_bg_envelop, .panel_bg_effect').css({'left': '-120%'});
            $('.box_sh_icon1, .box_sh_icon2').css({'display': 'block'});

            $('#bg_texture_layer').css({'display':'block'});
            $('#icon_item_off2').css({'display': 'none'});
            $('#hide_item2').prop('checked', true)

            if ($("input:radio[name='tx_select2']").is(':checked')) {
                $('#bg_background').removeClass('pattern_inner texture_inner');
                $('#bg_texture').addClass('texture_inner');
            } else {
                $('#bg_texture').removeClass('texture_inner');
                $('#bg_background').addClass('texture_inner');
            }

            /* Popup gallery ajax load */
            $.ajax({
                type: 'POST',
                url: '../assets/book/editor/sample_gallery/sample_galv_tx1.php',
                success: function(response, status, request) {
                    $('#bg_gallery_box1').children('.galbox_content').empty().append(response);
                },
                beforeSend: function() {
                    $('.loading_img').fadeIn('fast');
                },
                complete: function() {
                    $('.loading_img').fadeOut();
                }
            });

            $.ajax({
                type: 'POST',
                url: '../assets/book/editor/sample_gallery/sample_galv_tx2.php',
                success: function(response, status, request) {
                    $('#bg_gallery_box2').children('.galbox_content').empty().append(response);
                },
                beforeSend: function() {
                    $('.loading_img').fadeIn('fast');
                },
                complete: function() {
                    $('.loading_img').fadeOut();
                }
            });
        });

        /* Background area selector */
        $("input:radio[name='tx_select1']").on('click', function() {
            $("input:radio[name='tx_select2']").removeAttr("checked");
            $('.btn_fs_in, .btn_fs_out').toggle();
            $('#bg_texture').removeClass('texture_inner');
            $('#bg_background').removeClass('pattern_inner').addClass('texture_inner');
        });
        $("input:radio[name='tx_select2']").on('click', function() {
            $("input:radio[name='tx_select1']").removeAttr("checked");
            $('.btn_fs_in, .btn_fs_out').toggle();
            $('#bg_background').removeClass('pattern_inner texture_inner');
            $('#bg_texture').addClass('texture_inner');
        });


        /* Layer 3 - Main images(.panel_bg_pic)
         ---------------------------------------------------------------------- */
        $('.btn_item3').on('click', function() { //When the navigation icon click
            $('.btn_item3').removeClass('btn_item_gray').addClass('btn_item_color');
            $('.btn_item1, .btn_item2, .btn_item4, .btn_item5, .btn_item6').removeClass('btn_item_color').addClass('btn_item_gray');
            $('.panel_bg_pic').css({'left': '0'});
            $('.panel_bg_pattern, .panel_bg_texture, .panel_bg_color, .panel_bg_envelop, .panel_bg_effect').css({'left': '-120%'});
            $('.box_sh_icon1, .box_sh_icon2').css({'display': 'block'});

            $('#bg_pic_layer').css({'display':'block'});
            $('#icon_item_off3').css({'display': 'none'});
            $('#hide_item3').prop('checked', true)

            /* Popup gallery ajax load */
            $.ajax({
                type: 'POST',
                url: '../assets/book/editor/sample_gallery/sample_galv_mi1.php',
                success: function(response, status, request) {
                    $('#bg_gallery_box1').children('.galbox_content').empty().append(response);
                },
                beforeSend: function() {
                    $('.loading_img').fadeIn('fast');
                },
                complete: function() {
                    $('.loading_img').fadeOut();
                }
            });

            $.ajax({
                type: 'POST',
                url: '../assets/book/editor/sample_gallery/sample_galv_mi2.php',
                success: function(response, status, request) {
                    $('#bg_gallery_box2').children('.galbox_content').empty().append(response);
                },
                beforeSend: function() {
                    $('.loading_img').fadeIn('fast');
                },
                complete: function() {
                    $('.loading_img').fadeOut();
                }
            });
        });


        /* Image mask options */
        $('.opt_mask_lt').click(function() {
            $('.pic_inner').removeClass('mask_rt mask_lb mask_rb mask_cc mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_lt')
            $('.opt_mask_lt').addClass('bgpic_mask_on');
            $('.opt_mask_rt, .opt_mask_lb, .opt_mask_rb, .opt_mask_cc, .opt_mask_ll, .opt_mask_rr, .opt_mask_tt, .opt_mask_bb, .opt_mask_00').removeClass('bgpic_mask_on');
        });
        $('.opt_mask_rt').click(function() {
            $('.pic_inner').removeClass('mask_lt mask_lb mask_rb mask_cc mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_rt')
            $('.opt_mask_rt').addClass('bgpic_mask_on');
            $('.opt_mask_lt, .opt_mask_lb, .opt_mask_rb, .opt_mask_cc, .opt_mask_ll, .opt_mask_rr, .opt_mask_tt, .opt_mask_bb, .opt_mask_00').removeClass('bgpic_mask_on');
        });
        $('.opt_mask_lb').click(function() {
            $('.pic_inner').removeClass('mask_lt mask_rt mask_rb mask_cc mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_lb')
            $('.opt_mask_lb').addClass('bgpic_mask_on');
            $('.opt_mask_lt, .opt_mask_rt, .opt_mask_rb, .opt_mask_cc, .opt_mask_ll, .opt_mask_rr, .opt_mask_tt, .opt_mask_bb, .opt_mask_00').removeClass('bgpic_mask_on');
        });
        $('.opt_mask_rb').click(function() {
            $('.pic_inner').removeClass('mask_lt mask_rt mask_lb mask_cc mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_rb')
            $('.opt_mask_rb').addClass('bgpic_mask_on');
            $('.opt_mask_lt, .opt_mask_rt, .opt_mask_lb, .opt_mask_cc, .opt_mask_ll, .opt_mask_rr, .opt_mask_tt, .opt_mask_bb, .opt_mask_00').removeClass('bgpic_mask_on');
        });
        $('.opt_mask_cc').click(function() {
            $('.pic_inner').removeClass('mask_lt mask_rt mask_lb mask_rb mask_ll mask_rr mask_tt mask_bb mask_00').addClass('mask_cc')
            $('.opt_mask_cc').addClass('bgpic_mask_on');
            $('.opt_mask_lt, .opt_mask_rt, .opt_mask_lb, .opt_mask_rb, .opt_mask_ll, .opt_mask_rr, .opt_mask_tt, .opt_mask_bb, .opt_mask_00').removeClass('bgpic_mask_on');
        });
        $('.opt_mask_ll').click(function() {
            $('.pic_inner').removeClass('mask_lt mask_rt mask_lb mask_rb mask_cc mask_rr mask_tt mask_bb mask_00').addClass('mask_ll')
            $('.opt_mask_ll').addClass('bgpic_mask_on');
            $('.opt_mask_lt, .opt_mask_rt, .opt_mask_lb, .opt_mask_rb, .opt_mask_cc, .opt_mask_rr, .opt_mask_tt, .opt_mask_bb, .opt_mask_00').removeClass('bgpic_mask_on');
        });
        $('.opt_mask_rr').click(function() {
            $('.pic_inner').removeClass('mask_lt mask_rt mask_lb mask_rb mask_cc mask_ll mask_tt mask_bb mask_00').addClass('mask_rr')
            $('.opt_mask_rr').addClass('bgpic_mask_on');
            $('.opt_mask_lt, .opt_mask_rt, .opt_mask_lb, .opt_mask_rb, .opt_mask_cc, .opt_mask_ll, .opt_mask_tt, .opt_mask_bb, .opt_mask_00').removeClass('bgpic_mask_on');
        });
        $('.opt_mask_tt').click(function() {
            $('.pic_inner').removeClass('mask_lt mask_rt mask_lb mask_rb mask_cc mask_ll mask_rr mask_bb mask_00').addClass('mask_tt')
            $('.opt_mask_tt').addClass('bgpic_mask_on');
            $('.opt_mask_lt, .opt_mask_rt, .opt_mask_lb, .opt_mask_rb, .opt_mask_cc, .opt_mask_ll, .opt_mask_rr, .opt_mask_bb, .opt_mask_00').removeClass('bgpic_mask_on');
        });
        $('.opt_mask_bb').click(function() {
            $('.pic_inner').removeClass('mask_lt mask_rt mask_lb mask_rb mask_cc mask_ll mask_rr mask_tt mask_00').addClass('mask_bb')
            $('.opt_mask_bb').addClass('bgpic_mask_on');
            $('.opt_mask_lt, .opt_mask_rt, .opt_mask_lb, .opt_mask_rb, .opt_mask_cc, .opt_mask_ll, .opt_mask_rr, .opt_mask_tt, .opt_mask_00').removeClass('bgpic_mask_on');
        });
        $('.opt_mask_00').click(function() {
            $('.pic_inner').removeClass('mask_lt mask_rt mask_lb mask_rb mask_cc mask_ll mask_rr mask_tt mask_bb').addClass('mask_00')
            $('.opt_mask_00').addClass('bgpic_mask_on');
            $('.opt_mask_lt, .opt_mask_rt, .opt_mask_lb, .opt_mask_rb, .opt_mask_cc, .opt_mask_ll, .opt_mask_rr, .opt_mask_tt, .opt_mask_bb').removeClass('bgpic_mask_on');
        });


        /* Layer 4 - Color(.panel_bg_color)
         ---------------------------------------------------------------------- */
        $('.btn_item4').on('click', function() { //When the navigation icon click
            $('.btn_item4').removeClass('btn_item_gray').addClass('btn_item_color');
            $('.btn_item1, .btn_item2, .btn_item3, .btn_item5, .btn_item6').removeClass('btn_item_color').addClass('btn_item_gray');
            $('.panel_bg_color').css({'left': '0'});
            $('.panel_bg_pattern, .panel_bg_texture, .panel_bg_pic, .panel_bg_envelop, .panel_bg_effect').css({'left': '-120%'});
            $('.box_sh_icon1, .box_sh_icon2').css({'display': 'none'});

            $('#bg_color_layer').css({'display':'block'});
            $('#icon_item_off4').css({'display': 'none'});
            $('#hide_item4').prop('checked', true)
        });



        /* Layer 5 - Envelop patterns (.panel_bg_envelop)
         ---------------------------------------------------------------------- */
        $('.btn_item5').on('click', function() { //When the navigation icon click
            $('.btn_item5').removeClass('btn_item_gray').addClass('btn_item_color');
            $('.btn_item1, .btn_item2, .btn_item3, .btn_item4, .btn_item6').removeClass('btn_item_color').addClass('btn_item_gray');
            $('.panel_bg_envelop').css({'left': '0'});
            $('.panel_bg_pattern, .panel_bg_texture, .panel_bg_pic, .panel_bg_color, .panel_bg_effect').css({'left': '-120%'});
            $('.box_sh_icon1, .box_sh_icon2').css({'display': 'block'});

            $('#bg_envelop').css({'left': '0'});
            $('#icon_item_off5').css({'display': 'none'});
            $('#hide_item5').prop('checked', true)

            /* Popup gallery ajax load */
            $.ajax({
                type: 'POST',
                url: '../assets/book/editor/sample_gallery/sample_galv_en1.php',
                success: function(response, status, request) {
                    $('#bg_gallery_box1').children('.galbox_content').empty().append(response);
                },
                beforeSend: function() {
                    $('.loading_img').fadeIn('fast');
                },
                complete: function() {
                    $('.loading_img').fadeOut();
                }
            });

            $.ajax({
                type: 'POST',
                url: '../assets/book/editor/sample_gallery/sample_galv_en2.php',
                success: function(response, status, request) {
                    $('#bg_gallery_box2').children('.galbox_content').empty().append(response);
                },
                beforeSend: function() {
                    $('.loading_img').fadeIn('fast');
                },
                complete: function() {
                    $('.loading_img').fadeOut();
                }
            });
        });


        /* Layer 6 - Effect (.panel_bg_effect)
         ---------------------------------------------------------------------- */
        $('.btn_item6').on('click', function() { //When the navigation icon click
            $('.btn_item6').removeClass('btn_item_gray').addClass('btn_item_color');
            $('.btn_item1, .btn_item2, .btn_item3, .btn_item4, .btn_item5').removeClass('btn_item_color').addClass('btn_item_gray');
            $('.panel_bg_effect').css({'left': '0'});
            $('.panel_bg_pattern, .panel_bg_texture, .panel_bg_pic, .panel_bg_color, .panel_bg_envelop').css({'left': '-120%'});
            $('.box_sh_icon1').css({'display': 'block'});
            $('.box_sh_icon2').css({'display': 'none'});

            $('#bg_effect_layer').css({'display':'block'});
            $('#icon_item_off6').css({'display': 'none'});
            $('#hide_item6').prop('checked', true)

            /* Popup gallery ajax load */
            $.ajax({
                type: 'POST',
                url: '../assets/book/editor/sample_gallery/sample_galv_se1.php',
                success: function(response, status, request) {
                    $('#bg_gallery_box1').children('.galbox_content').empty().append(response);
                },
                beforeSend: function() {
                    $('.loading_img').fadeIn('fast');
                },
                complete: function() {
                    $('.loading_img').fadeOut();
                }
            });

        });
    });


    /* ======================================================================
     Color picker
     ====================================================================== */

    /* Target elements */
    function updateBG(color) {
        var HslColor = "transparent";
        if (color) {
            HslColor = color.toHslString();
        }
        $(".bg_color").css("background-color", HslColor);
        $(".btn_item4").css("background-color", HslColor);
    }

    /* Option */
    $(function() {
        $("#colorset1").spectrum({
            className: "full-spectrum", //풀 옵션 정의
            clickoutFiresChange: true, //완료 버튼 없이 바로바로 적용
            //flat: true, //팔레트가 처음부터 보임
            color: "rgba(255, 200, 0, 0)", //기본적으로 보이는 컬러
            showInput: true, //컬러값이 보이는 창
            showInitial: true, //컬러 미리보기 창
            showPalette: true, //좌측 팔레트 창
            showSelectionPalette: true,
            showAlpha: true, //투명도 조절 창
            allowEmpty: false, //컬러값 초기화 버튼
            showButtons: false, //완료 버튼
            maxPaletteSize: 10, //팔레트의 셀의 크기
            preferredFormat: "Hsl", //기본 컬러값 정의
            localStorageKey: "spectrum.demo",
            move: function(color) {
                updateBG(color);
            },
            show: function() {

            },
            beforeShow: function() {

            },
            hide: function(color) {
                updateBG(color);
            },
            palette: [
                ["rgba(0, 0, 0, 1)", "rgba(0, 0, 0, .9)", "rgba(0, 0, 0, .8)",
                    "rgba(0, 0, 0, .7)", "rgba(0, 0, 0, .6)", "rgba(0, 0, 0, .5)", "rgba(0, 0, 0, .4)", "rgba(0, 0, 0, .3)", "rgba(0, 0, 0, .2)", "rgba(0, 0, 0, .1)", "rgba(0, 0, 0, 0)"],
                ["rgba(255, 255, 255, 1)", "rgba(255, 255, 255, .9)", "rgba(255, 255, 255, .8)",
                    "rgba(255, 255, 255, .7)", "rgba(255, 255, 255, .6)", "rgba(255, 255, 255, .5)", "rgba(255, 255, 255, .4)", "rgba(255, 255, 255, .3)", "rgba(255, 255, 255, .2)", "rgba(255, 255, 255, .1)", "rgba(255, 255, 255, 0)"]
            ]
        });
    });
</script>
<!-- //[JS-BGP]] Java Script (sp_background.php only) -->